<template>
  <div class="intime-container">
    <span class="intime-title">实时净值</span>
    <div class="intime-image-container">
      <el-image
        v-loading="loading"
        style="width: 451px;height: 281px;"
        :src="src"
        class="intime-image"
        @error="errorHandler"
      />
    </div>
  </div>
<!--  <real-time-map />-->
</template>

<script>
// import RealTimeMap from '@/views/front/detail/components/estimate/RealTimeMap'
import { queryCodeInTimeAndRemoveWatermarkImage } from '@/api/front/fund/fundDataContent'

export default {
  name: 'EstimatedMap',
  components: {
    // RealTimeMap
  },
  props: {
    codeNumber: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      v: '',
      refreshJob: null,
      codeImageUrl: '',
      loading: false
    }
  },
  computed: {
    src() {
      return `${this.codeImageUrl}?v=${this.v}`
    }
  },
  created() {
    this.v = new Date().getTime()
    this.refreshImage()
  },
  beforeDestroy() {
    // 清除定时刷新任务
    clearInterval(this.refreshJob)
  },
  methods: {
    // 定时刷新实时图片，created时调用
    refreshImage() {
      this.fitchCodeInTimeAndRemoveWatermarkImage()
      this.refreshJob = setInterval(() => {
        console.log('定时刷新图片开始，上次刷新时间：', this.v)
        this.fitchCodeInTimeAndRemoveWatermarkImage()
        console.log('定时刷新图片结束，刷新后的时间：', this.v)
      }, 10000)
    },

    // 图片加载失败处理
    errorHandler() {
      // this.fitchCodeInTimeAndRemoveWatermarkImage()
    },

    // 调用后端接口获取去水印图片
    fitchCodeInTimeAndRemoveWatermarkImage() {
      this.loading = true
      queryCodeInTimeAndRemoveWatermarkImage(this.codeNumber).then(res => {
        // 图片路径
        this.codeImageUrl = res
        // 返回时刷新图片
        this.v = new Date().getTime()
        this.loading = false
      }).catch(err => {
        // 异常时不刷新图片
        console.log('调用后端接口获取去水印图片异常', err)
        this.v = new Date().getTime()
        this.loading = false
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.intime-container{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;

  .intime-title{
    display: block;
    margin: -16px 0 0;
    height: 54px;
    line-height: 54px;
    font-size: 18px;
    font-weight: 600;
    color: #333;
    white-space: pre-wrap;
  }

  .intime-image-container{
    width: 100%;

    .intime-image{
      // 图片模糊问题处理
      image-rendering: -moz-crisp-edges; /* Firefox */
      image-rendering: -o-crisp-edges; /* Opera */
      image-rendering: -webkit-optimize-contrast; /*Webkit (non-standard naming) */
      image-rendering: crisp-edges;
      -ms-interpolation-mode: nearest-neighbor; /* IE (non-standard property) */
    }
  }

}

</style>
